<template>
  <div>
    <h4>这是加法组件</h4>
    <!-- <div>Vuex 中存储的 Count 数据是： {{ $store.state.count }}</div> -->
    <div>Vuex 中存储的 Count 数据是： {{ count }}</div>
    <button @click="addFunc">+1</button>
    <button @click="addFuncAsync">+1 Async</button>
    <button @click="addFuncN">+ n</button>
    <button @click="addFuncNAsync">+ n  Async</button>
    <button @click="addFuncFive">+ 5</button>
    <p>{{ setNum }}</p>
    <p>{{ $store.getters.setNum }}</p>
  </div>
</template>

<script>
// 导入 state 数据的第二个方式： 使用 mapState 函数
// 这个函数会将 state 中存储的数据解析成计算属性来使用
// 需要在 computed 中调用 mapState 函数，并传入共享的数据作为参数
import { mapState, mapMutations, mapGetters } from 'vuex'

export default {
  name: 'Add',
  data() {
    return {}
  },
  created () {
    // console.log(this.$store.state.count)
  },
  methods: {
    ...mapMutations(['addHandleFive']),
    addFunc () {
      this.$store.commit('addHandle')
    },

    // 异步 + 1 操作
    addFuncAsync () {
      this.$store.dispatch('addAsync')
    },

    addFuncNAsync () {
      this.$store.dispatch('addNAsync', 3)
    },

    addFuncFive () {
      this.addHandleFive(5)
    },

    addFuncN () {
      this.$store.commit('addHandleN', 2)
    }
  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['setNum'])
  }
}
</script>

<style lang="less" scoped>
button {
  margin-top: 20px;
}
</style>
